<template>
    <div class="page">

        <el-form ref="form" label-width="120px">
            
            <el-form-item label="ID">
                {{editUserInfo._id}}
            </el-form-item>
            
            <el-form-item label="用户名">
                <el-input v-model="editUserInfo.username"  @blur="usernameBlur"></el-input>
            </el-form-item>

            <el-form-item label="昵称">
                <el-input v-model="editUserInfo.nickname" @blur="nicknameBlur"></el-input>
            </el-form-item>

            <el-form-item label="性别">
                <el-radio-group v-model="editUserInfo.gender" @change="sexRadioChange">
                    <el-radio v-for="(item,index) in userGender" :key="index" :label="index">{{item}}</el-radio>
                </el-radio-group>
            </el-form-item>
            
            <el-form-item label="注册时间">
                {{editUserInfo.register_date | turnTime}}
            </el-form-item>

            <el-form-item label="注册IP地址">
                {{editUserInfo.register_ip}}
            </el-form-item>

            <el-form-item label="备注">
                <el-input v-model="editUserInfo.comment" @blur="commentBlur"></el-input>
            </el-form-item>

            <el-form-item label="状态" >
                <el-select v-model="editUserInfo.status" placeholder="请选择用户状态" @change="statusSelectChange">
                    <el-option v-for="(item,index) in userStatus" :key="index" :label="item" :value="index">
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>

    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'

    export default {
        computed: {
            ...mapState(['editUserInfo', 'userStatus', 'userGender']),
        },
        
        mounted() {
            console.log(this.editUserInfo);
        },
        
        data() {
            return {
                api:this.$api.user,
            }
        },
        methods: {
            // 昵称失去焦点
            nicknameBlur(){
                this.changeData(this.editUserInfo._id,{
                    nickname:this.editUserInfo.nickname
                })
            },
            // 用户名失去焦点
            usernameBlur(){
                 this.changeData(this.editUserInfo._id,{
                     username:this.editUserInfo.username
                 })
            },
            // 性别变更
            sexRadioChange(sex){
                this.changeData(this.editUserInfo._id,{
                    gender:sex
                })
            },
            // 状态变更
            statusSelectChange(status){
                this.changeData(this.editUserInfo._id,{
                    status:status
                })
            },
            // 备注失去焦点
            commentBlur(){
                this.changeData(this.editUserInfo._id,{
                    comment:this.editUserInfo.comment
                })
            },
            changeData(user,change){
                this.$axios({
                    url:this.api,
                    method:"POST",
                    data:{
                        action:"change",
                        params:{
                            user,
                            change:change
                        }
                    }
                }).then(res=>{
                    if(res.data.code==0){
                        this.$message.success(res.data.msg)   
                    }else{
                        this.$message.error(res.data.msg)
                        console.log(res.data);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            }
        }
    }
</script>

<style scoped="scoped">
    .page {
        padding: 15px;
        box-sizing: border-box;
        padding-top: 25px;
    }
</style>
